<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入公司编码"
        v-model="queryForm.companyCode"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入公司名称"
        v-model="queryForm.companyName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入联系电话"
        v-model="queryForm.linkPhone"
      >
      </el-input>
      <el-select
        clearable
        style="width: 160px"
        class="filter-item"
        v-model="queryForm.status"
        placeholder="请选择审核状态"
      >
        <el-option
          v-for="(val, key) in Dicts.PROPERTY_COMPANY_STATUS"
          :key="key"
          :label="val"
          :value="key"
        >
        </el-option>
      </el-select>
      <el-button
        class="filter-item"
        @click="doQuery"
        type="primary"
        icon="el-icon-search"
        title="搜索"
        >搜索</el-button
      >
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        @click="addPropertyCompany()"
        type="success"
        icon="el-icon-plus"
        >新增</el-button
      >
    </div>
    <el-table
      v-loading="loading"
      @sort-change="handleSortChange"
      :data="records"
      style="width: 100%"
    >
      <el-table-column prop="rowId" label="ID" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="companyCode"
        label="公司编码"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="公司名称"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="公司地址"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="linkPhone"
        label="联系电话"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="businessLicense"
        label="营业执照"
        width="150"
        align="center"
      >
        <template slot-scope="scope" v-if="scope.row.businessLicense != null">
          <div v-viewer>
            <img
              :src="$oss(scope.row.businessLicense)"
              alt
              style="width:30px;height:30px;border-radius:5px;"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="审核状态"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.PROPERTY_COMPANY_STATUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="250"
        align="center"
      >
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding"
        fixed="right"
        width="350"
      >
        <template slot-scope="scope">
          <el-button
            type="success"
            icon="el-icon-search"
            size="mini"
            @click="openPropertyCompanyDialog(scope.row.rowId)"
            circle
            title="查看所属小区"
          ></el-button>
          <el-button
            type="default"
            icon="el-icon-search"
            size="mini"
            @click="openPropertyUserDialog(scope.row.rowId)"
            circle
            title="查看物业人员"
          ></el-button>
          <el-button
            size="mini"
            type="primary"
            @click="editPropertyCompanyById(scope.row)"
            title="编辑"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.rowId)"
            title="删除"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="`${addForm.rowId ? '编辑' : '新增'}物业公司`"
      :visible.sync="dialogFormVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addForm"
        label-width="120px"
        :rules="addFormRules"
        ref="addForm"
      >
        <el-form-item label="公司名称:" prop="companyName">
          <el-input
            v-model="addForm.companyName"
            auto-complete="off"
            placeholder="公司名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="公司地址:" prop="address">
          <el-input
            v-model="addForm.address"
            auto-complete="off"
            placeholder="公司地址"
          ></el-input>
        </el-form-item>

        <el-form-item label="联系电话:" prop="linkPhone">
          <el-input
            v-model="addForm.linkPhone"
            auto-complete="off"
            placeholder="联系电话"
          ></el-input>
        </el-form-item>

        <el-form-item label="上传营业执照:">
          <el-upload
            v-model="addForm.businessLicense"
            class="upload-demo"
            action=""
            :data="{ dir: '/propertyCompany/' + this.imgDate }"
            :file-list="files"
            :http-request="upload"
            :on-success="uploadCommunity"
            list-type="picture"
            accept="image/*"
            :limit="1"
          >
            <el-button size="small" type="primary">选择图片</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="审核状态" prop="status">
          <el-select
            v-model="addForm.status"
            placeholder="审核状态"
            style="width: 100%;"
          >
            <el-option
              v-for="(val, key) in Dicts.PROPERTY_COMPANY_STATUS"
              :key="key"
              :label="val"
              :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePropertyCompany(addForm.rowId)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="'查看管理小区'"
      :visible.sync="dialogShowCommunityVisible"
      width="35%"
      :close-on-click-modal="false"
    >
      <div class="filter-container">
        <el-input
          style="width: 200px;"
          class="filter-item"
          placeholder="请输入小区编号"
          v-model="queryFormCommunity.communityId"
        >
        </el-input>
        <el-input
          style="width: 200px;"
          class="filter-item"
          placeholder="请输入小区名称"
          v-model="queryFormCommunity.communityName"
        >
        </el-input>
        <el-button
          class="filter-item"
          @click="serachCommunity"
          type="primary"
          icon="el-icon-search"
          title="搜索"
          >搜索</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        @sort-change="handleSortChange1"
        :data="records1"
        style="width: 100%"
      >
        <el-table-column
          prop="communityId"
          label="小区编号"
          width="250"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="communityName"
          label="省/市/区/小区"
          width="450"
          align="center"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          class-name="small-padding"
          fixed="right"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteCommunity(scope.row.rowId)"
              title="删除"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="queryFormCommunity.current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryFormCommunity.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryFormCommunity.total"
        >
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogShowCommunityVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="'查看物业人员'"
      :visible.sync="dialogShowUserVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="filter-container">
        <el-input
          style="width: 200px;"
          class="filter-item"
          placeholder="请输入登录名"
          v-model="queryFormUser.name"
        >
        </el-input>
        <el-input
          style="width: 200px;"
          class="filter-item"
          placeholder="请输入手机号"
          v-model="queryFormUser.phone"
        >
        </el-input>
        <el-select
          clearable
          style="width: 160px"
          class="filter-item"
          v-model="queryFormUser.status"
          placeholder="请选择用户状态"
        >
          <el-option
            v-for="(val, key) in Dicts.CONSUMER_STATUS"
            :key="key"
            :label="val"
            :value="key"
          >
          </el-option>
        </el-select>
        <el-button
          class="filter-item"
          @click="serachUser"
          type="primary"
          icon="el-icon-search"
          title="搜索"
          >搜索</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        @sort-change="handleSortChange2"
        :data="recordsUser"
        style="width: 100%"
      >
        <el-table-column
          prop="userId"
          label="用户ID"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="登录名" width="150" align="center">
        </el-table-column>
        <el-table-column
          prop="realName"
          label="真名"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="isAdmin"
          label="用户身份"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ Dicts.IS_ADMIN[scope.row.isAdmin] }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="150" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="150" align="center">
          <template slot-scope="scope">
            {{ Dicts.CONSUMER_STATUS[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          class-name="small-padding"
          fixed="right"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteUser(scope.row.rowId)"
              title="删除"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="queryFormUser.current"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryFormUser.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryFormUser.total"
        >
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogShowUserVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryPropertyCompany,
  savePropertyCompany,
  deletePropertyCompany,
  querycommunity,
  deleteCommunity,
  selectPropertyUser,
  deleteUser
} from '@/api/property'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
export default {
  name: 'PropertyCompanyList',
  data() {
    return {
      imgDate: '',
      files: [],
      dialogFormVisible: false,
      dialogShowCommunityVisible: false,
      dialogShowUserVisible: false,
      loading: false,
      exampleForm: {
        rowId: undefined
      },
      modifyForm: {},
      exampleFormRules: {},
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        ascs: '',
        descs: '',
        importance: undefined,
        title: undefined
      },
      queryFormCommunity: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        ascs: '',
        descs: '',
        importance: undefined,
        title: undefined
      },
      queryFormUser: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        ascs: '',
        descs: '',
        importance: undefined,
        title: undefined
      },
      addForm: [],
      addFormRules: {
        companyCode: [
          { required: true, message: '请输入公司编号', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        linkPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入公司地址', trigger: 'blur' }
        ],
        businessLicense: [
          { required: true, message: '请上传营业执照', trigger: 'blur' }
        ]
      },
      records: [],
      records1: [],
      recordsUser: []
    }
  },
  created() {
    this.initOssClient().then(_ => {
      this.doQuery()
    })
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    handleSortChange1({ column, prop, order }) {
      this.queryFormCommunity.ascs = ''
      this.queryFormCommunity.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryFormCommunity.ascs = column.sortBy
        } else {
          this.queryFormCommunity.descs = column.sortBy
        }
      }
      this.queryFormCommunity.current = 0
      this.serachCommunity()
    },
    handleCurrentChange1(current) {
      this.queryFormCommunity.current = current
      this.serachCommunity()
    },
    handleSizeChange1(size) {
      this.queryFormCommunity.size = size
      this.serachCommunity()
    },
    handleSortChange2({ column, prop, order }) {
      this.queryFormUser.ascs = ''
      this.queryFormUser.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryFormUser.ascs = column.sortBy
        } else {
          this.queryFormUser.descs = column.sortBy
        }
      }
      this.queryFormUser.current = 0
      this.serachUser()
    },
    handleCurrentChange2(current) {
      this.queryFormUser.current = current
      this.serachUser()
    },
    handleSizeChange2(size) {
      this.queryFormUser.size = size
      this.serachUser()
    },
    doQuery() {
      this.loading = true
      queryPropertyCompany(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
      this.imgDate =
        new Date().getFullYear() +
        '' +
        (new Date().getMonth() + 1) +
        '' +
        new Date().getDate()
    },
    addPropertyCompany() {
      this.addForm = {}
      this.files = []
      this.dialogFormVisible = true
      this.$refs.addForm && this.$refs.addForm.resetFields()
    },
    savePropertyCompany() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          savePropertyCompany(this.addForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.dialogFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    editPropertyCompanyById({
      rowId,
      companyName,
      linkPhone,
      address,
      businessLicense,
      status
    }) {
      this.addPropertyCompany()
      this.files = []
      this.addForm = {
        rowId: rowId,
        companyName: companyName,
        linkPhone: linkPhone,
        address: address,
        businessLicense: businessLicense,
        status: status
      }
    },
    upload(options) {
      this.uploadForElement(options)
    },
    uploadCommunity(response, file, fileList) {
      this.addForm.businessLicense = response.name
    },
    openPropertyCompanyDialog(rowId) {
      this.queryFormCommunity = {}
      this.queryFormCommunity.propertyCompanyId = rowId
      this.dialogShowCommunityVisible = true
      this.serachCommunity()
      this.$refs.queryFormCommunity &&
        this.$refs.queryFormCommunity.resetFields()
    },
    serachCommunity() {
      this.loading = true
      querycommunity(this.queryFormCommunity).then(({ data: { data } }) => {
        this.queryFormCommunity.current = data.current
        this.queryFormCommunity.pages = data.pages
        this.queryFormCommunity.total = data.total
        this.queryFormCommunity.size = data.size
        this.records1 = data.records
        this.loading = false
      })
    },
    openPropertyUserDialog(rowId) {
      this.queryFormUser = {}
      this.queryFormUser.propertyCompanyId = rowId
      this.dialogShowUserVisible = true
      this.serachUser()
      this.$refs.queryFormUser && this.$refs.queryFormUser.resetFields()
    },
    serachUser() {
      this.loading = true
      selectPropertyUser(this.queryFormUser).then(({ data: { data } }) => {
        this.queryFormUser.current = data.current
        this.queryFormUser.pages = data.pages
        this.queryFormUser.total = data.total
        this.queryFormUser.size = data.size
        this.recordsUser = data.records
        this.loading = false
      })
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该公司, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePropertyCompany(rowId).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: '删除物业公司成功',
            type: 'success'
          })
        })
      })
    },
    deleteCommunity(rowId) {
      this.$confirm('此操作将永久删除该小区, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCommunity(rowId).then(({ data: { data, msg } }) => {
          this.serachCommunity()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    deleteUser(rowId) {
      this.$confirm('此操作将永久删除该人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(rowId).then(({ data: { data, msg } }) => {
          this.serachUser()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    }
  },
  components: {}
}
</script>

<style scoped></style>
